<template>
  <div class="wrapper">
    <div style="margin: 200px auto; background-color: #fff; width: 350px; height: 250px; padding: 20px; border-radius: 10px">
      <div style="margin: 20px 0; text-align: center; font-size: 24px"><b>登 录</b></div>
      <!-- <el-input placeholder="请输入账号" size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="user.username"></el-input>
      <el-input placeholder="请输入密码" size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input>
      <div style="margin: 10px 0; text-align: right">
        <el-button type="primary" size="small" autocomplete="off" @click="login">登录</el-button>
        <el-button type="warning" size="small" autocomplete="off" @click="$router.push('/register')">注册</el-button>
      </div> -->
	  <el-form :model="user" :rules="rules" ref="ruleForm" label-width="70px">
	  	<el-form-item label="用户名:" prop="username">
	  		<el-input placeholder="用户名" v-model="user.username"></el-input>
	  	</el-form-item>
	  	<el-form-item type="password" label="密码:" prop="password">
	  		<el-input type="password" placeholder="密码" v-model="user.password"></el-input>
	  	</el-form-item>
	  	<el-form-item>
	  		<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
			<el-button type="warning" autocomplete="off" @click="$router.push('/register')">注册</el-button>
	  	</el-form-item>
	  </el-form>
    </div>
  </div>
</template>

<script>
	import {login} from '../axios/api/userApi.js'
	
export default {
  name: "Login",
  data(){
    return{
      user:{
		  username:'',
		  password: ''
	  },
	  rules: {
	  	username: [{
	  		required: true,
	  		message: '姓名是必填项',
	  		trigger: 'blur'
	  	}],
	  	password: [{
	  			required: true,
	  			message: '密码不能为空',
	  			trigger: 'blur'
	  		}
	  	]
	  }
    }
  },
  methods:{
	  submitForm(formName) {
	  	let that = this
	  	this.$refs[formName].validate((valid) => {
	  		if (valid) {
	  			login(this.user).then(res=>{
	  				localStorage.setItem("user", JSON.stringify(res.data))
	  				that.$router.push("/home")
	  			})
	  		} else {
	  			return false;
	  		}
	  	})
	  
	  },
    //登录验证
    login(){
		console.log(this.user)
		login(this.user).then((res)=>{
			console.log(res.data)
			localStorage.setItem("user",JSON.stringify(res.data))
			this.$router.push("/")
		})
      // this.request.post("/user/login",this.user).then(res => {
      //   if(!res){
      //     //localStorage.setItem("user",JSON.stringify(res.data))//将用户信息存入浏览器
      //     this.$message.error("用户名或密码错误")
      //   }else{
      //     this.$router.push("/")
      //   }
      // })
    }
  }
}
</script>

<style>
  .wrapper{
    height: 100vh;
    background-image: linear-gradient(to bottom right,#FC466B,#3F5EFB);
    overflow: hidden;
  }
</style>